<template>
  <div>
    <form @submit.prevent>
      <h2>来 , 说说你在做什么 , 想什么</h2>
      <section class="shuru">
        <input type="text" v-model.trim="myname" />
        <div @click="src">
          <img ref="first" src="./face1.gif" alt="" />
          <img ref="other" src="./face8.gif" alt="" />
          <img ref="other" src="./face2.gif" alt="" />
          <img ref="other" src="./face3.gif" alt="" />
          <img ref="other" src="./face4.gif" alt="" />
          <img ref="other" src="./face6.gif" alt="" />
          <img ref="other" src="./face7.gif" alt="" />
          <img ref="other" src="./face8.gif" alt="" />
        </div>
      </section>
      <section class="cont">
        <textarea v-model.trim="mycon" style="resize: none;"></textarea>
      </section>
      <section class="submit">
        <span>
          还能输入
          <b>{{ 140 - mycon.length }}</b>
          个字
        </span>
        <button @click="submit">广播</button>
      </section>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myname: '',
      mycon: '',
      mytime: '',
      mysrc: '',
    }
  },
  methods: {
    submit() {
      if (this.myname === '') {
        return alert('请填写您的姓名')
      }
      if (this.myname.length < 2 || this.myname.length > 8) {
        return alert('姓名由2-8位数字字母下划线汉字组成')
      }
      if (this.mycon === '') {
        return alert('随便说点什么吧')
      }
      let dt = new Date()
      let month = dt.getMonth() + 1
      let day = dt.getDate()
      let hour = dt.getHours()
      let minute = dt.getMinutes()
      function add0(x) {
        if (x < 10) {
          return '0' + x
        } else {
          return x
        }
      }
      this.mytime = `${add0(month)}月${add0(day)}日 ${add0(hour)}:${add0(
        minute,
      )}`
      this.$emit('add', {
        src: this.mysrc || require('./face1.gif'),
        name: this.myname,
        content: this.mycon,
        time: this.mytime,
      })
      this.myname = this.mycon = ''
      this.$refs.first.style.opacity = 1
      this.$refs.other.style.opacity = 0.5
      console.log(this.$refs.other)
    },
    src() {
      let ele = event.target
      function getIndex(ele) {
        let children = ele.parentNode.children
        for (let i = 0; i < children.length; i++) {
          if (ele === children[i]) return i
        }
      }
      let children = ele.parentNode.children
      for (let i = 0; i < children.length; i++) {
        children[i].style.opacity = 0.5
      }
      children[getIndex(ele)].style.opacity = 1

      if (ele.tagName === 'IMG') {
        this.mysrc = ele.getAttribute('src')
      }
    },
  },
}
</script>

<style lang="scss">
form {
  padding: 0 20px 15px;
  h2 {
    font-size: 18px;
    color: #333;
    font-weight: 500;
  }
  .shuru {
    margin: 10px 0;
    display: flex;
    input {
      height: 25px;
      padding-left: 10px;
    }
    img {
      width: 30px;
      margin-right: 5px;
      opacity: 0.5;
      &:first-child {
        opacity: 1;
      }
      &:hover {
        opacity: 1;
        cursor: pointer;
      }
    }
  }
  .cont {
    textarea {
      width: 448px;
      height: 65px;
      padding: 3px 5px;
    }
  }
  .submit {
    text-align: right;
    button {
      width: 112px;
      height: 30px;
      cursor: pointer;
    }
  }
}
</style>
